<template>
  <section>
    <div class="tuan">爆爆团</div>
    <div class="da">限时爆款 超级低价</div>
    <div class="renwu">
      <div @click="baobaotuan">正在抢购</div>
      &nbsp;&nbsp;&nbsp;
      <div @click="shangxin">上新预告</div>
    </div>
    <ul>
      <li v-for="(item, index) in shuju" :key="index">
        <div class="left"><img :src="item.picture" alt="" /></div>
        <div class="right">
          <div>{{ item.name }}</div>
          <div>买一送一</div>
          <div class="xia">
            <div>{{ item.min_price }}</div>
            <span>{{ item.promotion_info }}</span>
            <div class="xr">
              <button @click="anniu(item)">{{(item.status==0) ? '马上抢':'已抢'}}</button>
              <div>{{ item.month_saled_content }}</div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
import { a } from "@/api";
export default {
  data() {
    return {
      shuju: [],
      shuju1:[],
      shuju2:[],
      sts:1
    };
  },
  methods: {
    baobaotuan() {
      if(this.sts==1){
        a({ status: 0 }).then((res) => {
        // console.log(res.data.list);
        this.shuju1 = res.data.list;
        // console.log(this.shuju);
        this.shuju=this.shuju1
        this.sts=2
      });
      }else{
        console.log(this.shuju);
        return this.shuju=this.shuju1
      }
    },
    shangxin() {
      if(this.sts==2){
        a({ status: 1 }).then((res) => {
        this.shuju2 = res.data.list.map(item => {
          return { ...item, status: 0 }
        })
        this.sts=3
      });
      }else{
        return this.shuju=this.shuju2
      }
    },
    anniu(item) {
      if (item.status == 0) {
        item.status = 1
        console.log(this.shuju);
      }
    },
  },
};
</script>

<style scoped>
body section {
  width: 100%;
  background-color: crimson;
}

section .tuan {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 25px;
}

section .da {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 40px;
}

section .renwu {
  display: flex;
}

section ul li {
  display: flex;
  margin: 5px;
  padding: 10px;
  width: 94%;
  height: 150px;
  background-color: pink;
}

section ul li .left {
  width: 120px;
  height: 120px;
}

section ul li .left img {
  width: 100%;
}

section ul li .right {
  margin-left: 5px;
  flex: 1;
}

section ul li .right .xia {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

section ul li .right .xia .xr button {
  margin-bottom: 10px;
  width: 70px;
  height: 30px;
}
</style>
